<template>
  <div>
    <el-card style="background-color:white;">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>统计报表</el-breadcrumb-item>
        <el-breadcrumb-item>统计表</el-breadcrumb-item>
      </el-breadcrumb>
      <!--信息栏-->
      <el-row style="margin: 0 auto">
        <el-col :span="3.5" style="margin-left: 15%">
          <el-card><i class="el-icon-user-solid">员工数量:{{this.empNum}}</i></el-card>
        </el-col>
        <el-col :span="3.5" style="margin-left: 46px">
          <el-card><i class="el-icon-user-solid">员工数量:{{this.empNum}}</i></el-card>
        </el-col>
        <el-col :span="3.5" style="margin-left: 46px">
          <el-card><i class="el-icon-user-solid">员工数量:{{this.empNum}}</i></el-card>
        </el-col>
        <el-col :span="3.5" style="margin-left: 46px">
          <el-card><i class="el-icon-user-solid">员工数量:{{this.empNum}}</i></el-card>
        </el-col>
      </el-row>

      <!--饼状图-->
      <div class="second" style="margin-top: 20px">
        <ul>
          <li>
            <el-card class="box-card" style="background-color:RGB(255,239,247);">
              <div>
                <h5>部门人数分布</h5>
              </div>
              <div>
                <div id="dept" style="width:100%;height:200px;float:left;"></div>
              </div>
            </el-card>
          </li>
          <li>
            <el-card class="box-card" style="background-color:RGB(255,244,238);">
              <div>
                <h5>员工年龄分布</h5>
              </div>
              <div>
                <div id="age" style="width:100%;height:200px;float:left;"></div>
              </div>
            </el-card>
          </li>
        </ul>
      </div>
      <!--柱状图-->
      <div style="margin: 60px 15%;width: 800px;height: 280px">
        <el-card class="box-card" style="background-color:RGB(237,238,255)">
          <div>
            <span>员工在职状态分布</span>
          </div>
          <div>
            <div id="myChart" style="width:100%;height:280px;float:left;"></div>
          </div>
        </el-card>
    </div>
    </el-card>

  </div>
</template>

<script>
export default {
  name: "total",
  data() {
    return {
      age: '',
      dept: '',
      imgData:[],
      myChart: '',
      empNum:'',
      value: new Date(),
      empHeaderImgUrl: this.$HRMSImageUrl,
      opinionData2: [
        // {value:12, name: '正式员工'},
        // {value:12 , name: '试用期'},
        // {value:12, name: '实习期'},
        // {value:12 , name: '服务派遣'}
      ],
      deptData: [
        // {value: 15, name: '管理中心', itemStyle: 'red'},
        // {value: 30, name: '技术中心', itemStyle: '#1FC48D'},
        // {value: 18, name: '运营中心', itemStyle: '#6DC8EC'},
        // {value: 23, name: '客服中心', itemStyle: '#3F8FFF'}
      ],
      ageData: [
        // {value: 15, name: '20-30', itemStyle: 'red'},
        // {value: 30, name: '30-35', itemStyle: '#1FC48D'},
        // {value: 18, name: '35-40', itemStyle: '#6DC8EC'},
        // {value: 23, name: '40以上', itemStyle: '#3F8FFF'}
      ],
    }
  },
  methods: {
    initAgeData() {
      let url = this.$HRMSUrl + "employee/initAgeData";
      this.$axios.get(url).then(res => {
        if (res.data.code == 200) {

          let age = res.data.data
          let name = Object.keys(age)
          let value = []
          name.forEach(item => {
            value.push(age[item])
          })
          for (let i = 0; i < name.length; i++) {
            this.ageData.push({value: value[i], name: name[i]})
          }
          this.age = this.$echarts.init(document.getElementById('age')).setOption({
            tooltip: {
              trigger: 'item'//放大显示文本
            },
            series: [
              {
                name: '年龄分布',
                type: 'pie',
                radius: '50%',
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  },
                  color: function (params) {
                    let colorList = ['red', '#1FC48D', '#6DC8EC', '#3F8FFF']
                    return colorList[params.dataIndex]
                  }
                },
                data: this.ageData
              }
            ]
          })

        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },
    initDeptData() {
      let url = this.$HRMSUrl + "employee/initDeptData";
      this.$axios.get(url).then(res => {
        if (res.data.code == 200) {
          let dept = res.data.data
          let name = Object.keys(dept)
          let value = []
          name.forEach(item => {
            value.push(dept[item])
          })
          for (let i = 0; i < name.length; i++) {
            this.deptData.push({value: value[i], name: name[i]})
          }

          this.dept = this.$echarts.init(document.getElementById('dept')).setOption({
            tooltip: {
              trigger: 'item'//放大显示文本
            },
            series: [
              {
                name: '部门人数分布',
                type: 'pie',
                radius: '50%',
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  },
                  color: function (params) {
                    let colorList = ['red', '#1FC48D', '#6DC8EC', '#3F8FFF']
                    return colorList[params.dataIndex]
                  }
                },
                data: this.deptData
              }
            ]
          })

        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },
    initJobStatusData() {
      let url = this.$HRMSUrl + "employee/initJobStatusData";
      this.$axios.get(url).then(res => {
        if (res.data.code == 200) {
          let user = res.data.data
          let name = Object.keys(user)
          let value = []
          name.forEach(item => {
            value.push(user[item])
          })
          let empNum = 0;
          for (let i = 0; i < value.length; i++) {
            empNum = empNum + value[i]
          }
          this.empNum = empNum
          this.myChart = this.$echarts.init(document.getElementById('myChart')).setOption({
            xAxis:{
              type:'category',
              data:name
            },
            yAxis:{
              type:'value'
            },

            tooltip: {
              trigger: 'item',
              // formatter: '{a} <br/>{b} : {d}%' 百分之
            },
            color: ['red', '#1FC48D', '#6DC8EC', '#3F8FFF'],
            backgroundColor: 'RGB(237,238,255)',

            //右下角显示的文字
            // legend: {
            //   orient: 'vertical',
            //   icon: 'circle',
            //   align: 'left',
            //   x: 'right',
            //   y: 'bottom',
            //   data: name
            // },
            series: [
              {
                name: '在职状态',
                type: 'bar',
                data:value,
                // radius: ['50%', '70%'],空心元
                radius: '50%',
                // avoidLabelOverlap: false,
                // center: ['40%', '50%'],
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  },
                  color: function (params) {
                    // 自定义颜色
                    let colorList = ['red', '#1FC48D', '#6DC8EC', '#3F8FFF']
                    return colorList[params.dataIndex]
                  }
                },
              }
            ]
          })
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },
  },
  created() {
    this.initAgeData();
    this.initDeptData();
    this.initJobStatusData();
  },
}
</script>

<style scoped>

.second {
  width: 1000px;
  height: 200px;
  margin: 0px 12%;
}

.second ul li {
  float: left;
  width: 390px;
  margin-left: 30px;
}

</style>